<template>
    <div class="home-wrapper">
        <project-menu :detail="projectDetail" :pid="projectId"></project-menu>
        <div class="filters-wrapper">
            <div class="title total_title">
                <span>{{title}} - 标签<font class="total_title_back" @click="$router.go(-1)">/ 返回上一级</font></span>
                <el-button v-if="projectDetail.status == 1" class="fr" type="primary" size="small"
                    @click="addLabel">新建标签
                </el-button>
            </div>
            <el-table :data="labeldata" border
                :header-cell-style="{'text-align':'center','background':'#f7f7f7','color':'#666'}" style="width: 100%">
                <el-table-column type="index" width="50" align="center" label="编号">
                </el-table-column>
                <el-table-column prop="title" label="标签名称" align="center">
                </el-table-column>
                <el-table-column prop="content" label="标签内容" align="center">
                </el-table-column>
                <el-table-column prop="update_time" label="更新时间" align="center">
                </el-table-column>
                <el-table-column prop="state" width="300" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button v-if="projectDetail.status == 1" style="margin-left: 10px;" size="mini" type="primary"
                            @click="modifyLabelClick(scope.row)">修改</el-button>
                        <el-button v-if="projectDetail.status == 1" style="margin-left: 10px;" size="mini" type="danger"
                            @click="delClick(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row type="flex" justify="end" style="margin-top: 20px;">
                <el-pagination background layout="prev, pager, next" :total="total" :current-page="curPage" :page-size="pageSize" @current-change="handleCurrentChange($event)">
                </el-pagination>
            </el-row>
            <!-- 分割线 -->
            <el-dialog :title="newlabel.id <= 0 ? '新建标签' : '修改标签'" :visible.sync="addlabel" :close-on-click-modal="false" width="35%" center>
                <el-row type="flex" align="middle" justify="center">
                    <el-form :model="newlabel" ref="newlabel" :rules="rules" style="width: 85%;">
                        <el-form-item class="is-required" prop="title">
                            <el-input v-model="newlabel.title" placeholder="请输入标签名称" size="small" />
                        </el-form-item>
                        <el-form-item class="is-required" prop="content">
                            <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" placeholder="请输入标签，以分号或空格隔开,最多20个标签,且每个标签长度不超过10个字符"
                                v-model="newlabel.content">
                            </el-input>
                        </el-form-item>
                    </el-form>
                </el-row>
                <el-row type="flex" align="middle" justify="center">
                    <el-button size="small" @click="addlabel = false">取 消</el-button>
                    <el-button size="small" type="primary" :loading="loading" @click="addLabelClick">确定</el-button>
                </el-row>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { pageParams } from '@/settings'
    export default {
        data() {
            var validateLabel = (rule, value, callback) => {
                /*eslint no-useless-escape: "error"*/
                let tmp = value.split(/\s|,/)
                let count = 0
                let labelMaxLen = 0;
                tmp.forEach(ele => {
                    if (ele != '' && ele != ',') {
                        console.log(ele)
                        count = count + 1
                        if (ele.length > labelMaxLen) {
                            labelMaxLen = ele.length
                        }
                    }
                })
                if (labelMaxLen > 10) {
                    callback(new Error('有标签字符超过10个字符'))
                    return
                }
                if(count > 20) {
                    callback(new Error('标签个数不能超过20个'))
                    return
                }
                callback()
            }
            return {
                loading: false,
                type: '',
                title: '',
                projectId: 0,
                projectDetail: {},
                labeldata: [],
                pageSize: pageParams.pageSize,
                curPage: 1,
                total: 0,
                addlabel: false,
                newlabel:{
                    id: 0,
                    title:'',
                    content:'',
                    type: ''
                },
                rules: {
                    title : [
                        { required: true, message: '请输入标签名称', trigger: 'blur' },
                    ],
                    content : [
                        { required: true, message: '请输入标签内容', trigger: 'blur' },
                        { validator: validateLabel, trigger: 'blur'}
                    ]
                }
            }
        },
        created() {
            this.projectId = this.$router.currentRoute.params.id
            this.type = this.$router.currentRoute.params.type
            this.newlabel.type = this.type
            if (this.type == 'project') {
                this.title = '项目素材库'
            } else {
                this.title = '个人素材库'
            }
        },
        mounted() {
            this.loadData()
        },
        methods: {
            loadData() {
                this.$axios.get('/project/detail', {projectid: this.projectId})
                .then(e => {
                    // console.log('项目详情', e.data)
                    this.projectDetail = e.data
                })
                this.loadLabel({})
            },
            loadLabel(param) {
                param['type'] = this.type
                param['projectid'] = this.projectId
                param['number'] = this.pageSize
                if (!param['page']) {
                    param['page'] = this.curPage
                }
                this.$axios.get('/label', param)
                    .then(e => {
                        this.labeldata = e.data.items
                        this.total = e.data.total
                    })
            },
            handleCurrentChange(val) {
                this.curPage = val
                this.loadLabel({page: val})
            },
            addLabel() {
                this.newlabel.id=0
                this.newlabel.title = ''
                this.newlabel.content = ''
                this.addlabel = true
            },
            addLabelClick() {
                let tmp = this.newlabel.content.split(/\s|,|，/)
                let arr = []
                tmp.forEach(ele => {
                    if (ele != '' && ele != ',' && ele != '，') {
                        arr.push(ele)
                    }
                })
                this.newlabel.content = arr.join(' ')
                this.$refs['newlabel'].validate((valid) => {
                    if (valid) {
                        this.loading = true
                        this.newlabel['projectid'] = this.projectId
                        this.$axios.post('/label/add', this.newlabel)
                            .then((e) => {
                                this.loading = false
                                this.addlabel = false
                                this.$message({
                                    type: 'success',
                                    message: e.msg ? e.msg : '操作成功!'
                                })
                                this.loadLabel({})
                            }).catch(() => {
                                this.loading = false
                            })
                    }
                })
            },
            modifyLabelClick(item) {
                this.newlabel.title = item.title
                this.newlabel.id = item.id
                this.newlabel.content = item.content
                this.addlabel = true
            },
            delClick(item) {
                this.$confirm('此操作将删除该项, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post('/project/label/delete', {id: item.id, type: this.type})
                    .then((e) => {
                        this.$message({
                            type: 'success',
                            message: e.msg ? e.msg : '删除成功!'
                        })
                        this.loadLabel({})
                    })
                }).catch(() => {
                });
            }
        }
    }
</script>